<template>
      <div class="main">
        <div class="w big_main">
            <div class="main_top">
                <h2>注册新用户</h2>
                <span>我有账户，去
                    <a href.prevent="" @click="$router.push('/Login')">登录</a></span>
            </div>
            <div class="main_center">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" class="demo-ruleForm" size='small' style="width:320px">
                    
                    <el-form-item label="手机号" prop='phone' :show-message='flegbutton' >
                        <el-input type="text" v-model="ruleForm.phone" @focus='setFocuse' @blur="SetBlur" ></el-input>
                    </el-form-item>
                    
                    <el-form-item label="验证码" prop="code" :inline='true'  :show-message='flegbutton'>
                        <el-row>
                            <el-col :span="15">
                                 <el-input v-model="ruleForm.code"  @focus='setFocuse' @blur="SetBlur" ></el-input> 
                            </el-col>
                            <el-col :span="4">
                                <el-button type="primary"  @click="SendCode" class="el-code-button">发送验证码</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    
                    <el-form-item label="密码" prop="password" :show-message='flegbutton'>
                        <el-input type="password" v-model="ruleForm.password" @focus='setFocuse' @blur="SetBlur"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="确认密码" prop="checkPass"  :show-message='flegbutton'>
                        <el-input type="password" v-model="ruleForm.checkPass"  @focus='setFocuse' @blur="SetBlur"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="" prop="checkbox" class="setflex" :show-message='fleg'>
                            <el-checkbox label="同意协议并注册《京东用户协议》" name="name" v-model="ruleForm.checkbox"></el-checkbox>
                    </el-form-item>
                    
                    <el-form-item >
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name:'Register',
    data() {
        // 密码验证规则
        let validatePass = (rule, value, callback) => {
            let ispass =  /(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}/;
            if(value.length < 7){
                callback(new Error('密码至少8位'));
            }else if(value!=''&&ispass.test(value)) { //验证正则表达式
                 callback();
           }else{
               callback(new Error("至少包含字母与数字"))
           }            
      };
      //确认密码验证规则
        let validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        // 手机号验证规则
        let validatePhone = (rule, value, callback) => {
            let myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(myreg.test(value)){
                callback();
            }else{
                  callback(new Error('请输入有效的手机号码，需是11位'));
            } 
        }
        //验证码验证规则
        let validateCode = (rule,value,callback) =>{
            let isCode = /(?=.*[0-9])/
            if (value.length==6) {
                if (isCode.test(value)) {
                    if (this.ruleForm.code == this.Code) {
                        callback();
                    }else{
                        callback(new Error('请输入正确验证码'))
                    }
                }
            }else{
                callback(new Error('验证码必须为6位数'));
            }
        }
        //单选框验证规则
        let validateCheckbox = (rule,value,callback) => {
            if (value) {
                callback()
            }else{
                callback(new Error('请勾选协议'))
            }
        }
        return {
            fleg:false,
            flegbutton:true,
            ruleForm: {
                password: '',
                checkPass: '',
                phone:'',
                code:'',
                checkbox:''
            },
            //验证规则
            rules: {
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                phone: [
                    { validator: validatePhone, trigger: 'blur' }
                ],
                code:[
                    { validator: validateCode, trigger: 'change'}
                ],
                checkbox:[
                    { validator: validateCheckbox}
                ]
                },
            }
    },
    methods:{
        //移出时显示提示
        SetBlur(){
           this.flegbutton=true
        },
        //移入时不显示提示
        setFocuse(){
            this.flegbutton= false
        },

        //提交
        submitForm(formName) {
            this.$refs[formName].validate(async(valid) => {
                // 如果单选框点击了 并且为false 则显示样式
                if (!this.ruleForm.checkbox) {
                    this.fleg = true
                }
                if (valid) {
                    this.fleg=true
                    let {phone,password,code} = this.ruleForm
                       let gister = await this.$store.dispatch('user/getregister',{phone,password,code})
                        if (gister.data.code==200) {
                            this.$router.push({
                                name:'login'
                            })
                        }else{
                            alert(gister.data.message)
                        }
                } else {
                    alert('请正确填写信息')
                    return false;
                }
            });
        },


        // 获取验证码
       async SendCode(){
           let myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
           if (myreg.test(this.ruleForm.phone)) {
               try {
                    await this.$store.dispatch('user/getcode',this.ruleForm.phone);
                    this.ruleForm.code = this.Code
                } catch (error) {
                    console.log(error);
                }
           }else{
               console.log("请输入正确的手机号");
           }
            
        },

        
        //点击提交按钮
    //   async  Succesregist(){
    //       if (!this.ruleForm.checkbox) {
    //           this.fleg = true
    //       }
    //         let {phone,password,AginPassword,checked,code} = this
    //         if (phone && password && AginPassword && code && checked && password==AginPassword ) {
    //             let gister = await this.$store.dispatch('user/getregister',{phone,password,code})
    //             if (gister.data.code==200) {
    //                  this.$router.push({
    //                     name:'login'
    //                 })
    //             }else{
    //                 alert("已被注册");
    //             }  
    //         }
    //     },
    },
    computed:{
        ...mapState('user',['Code'])
    }
}
</script>

<style scoped lang='less'>
.main{
    .big_main{
        border: 1px solid #dfdfdf;
        .main_top{
            display: flex;
            justify-content: space-between;
            background: #ececec;
            box-sizing: border-box;
            padding: 6px 15px;
            border-bottom: 1px solid #dfdfdf;
            color: #333;
            span{
                font-size: 14px;
                font-weight: 600;
                line-height: 27px;
                a{
                    margin-left: 10px;
                    color:  #e1251b;
                    cursor: pointer;
                }
            }
        }
        .main_center{
            display: flex;
            justify-content: center;
            text-align: center;
            width: 100%;
            margin: 20px 0px;
           form{
                position: relative;
                .yanzheng{
                    button{
                        position: absolute;
                        top: 0;
                        right: -80px;
                        height: 38px;
                    }
                }
           }
            .input{
                margin-bottom: 18px;
                position: relative;
                label{
                    display: block;
                    line-height: 38px;
                    width: 65px;
                    font-size: 14px;
                    text-align: right;
                }
                input{
                    position: absolute;
                    top: 0;
                    left: 69px;
                    width: 270px;
                    height: 38px;
                    padding-left: 8px;
                    box-sizing: border-box;
                    margin-left: 5px;
                    outline: none;
                    border: 1px solid #999;
                }
                span{
                    position: absolute;
                    top: 100%;
                    left: 75px;
                    color: red;
                }
            }
            .checkbox{
                position: relative;
                margin-top: 20px;
                box-sizing: border-box;
                padding-left: 75px;
                display: flex;
                margin-bottom: 18px;
                .center{
                    position:absolute;
                    top:-3px;
                    left:90px;
                }
                .bottom{
                    position: absolute;
                    top: 100%;
                    left: 75px;
                    color: red;
                }
            }
            .Succesregist{
                margin-left: 75px;
                margin-top: 4px;
                width: 270px;
                height: 36px;
                background: #e1251b;
                border: 0;
                outline: none;
                color: #fff;
                font-size: 16px;
            }
        }
    }
}
.setflex{
    display: flex;
}
.el-code-button{
    margin-left: 5px;
    padding: 9px 10px;
}
.footer{
    background-color: #fff;
}
</style>